<!--
 * @Author: 李环玉 834654733@qq.com
 * @Date: 2023-10-13 17:52:42
 * @LastEditors: 李环玉 834654733@qq.com
 * @LastEditTime: 2023-12-21 21:47:08
 * @FilePath: \nuxt-app\pages\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main-home">
    <NuxtLayout name="backgroud">
      <div class="homePage" v-loading="loading">
        <div>
          <NoticeCard />
          <UserCard/>
          <ToolCard/>
        </div>
        <div class="homePage-center">
          <div class="homePage-center_carousle">
            <n-carousel
              key="card"
              effect="card"
              :centered-slides="true"
              slides-per-view="auto"
              draggable
              loop
              autoplay
              :interval="500"
              style="height: 240px"
            >
              <n-carousel-item
                v-for="item in carouselList"
                :key="item.id"
                :style="{ width: '60%' }">
                <a :href="item.href" target="_blank">
                  <img
                    class="carousel-img"
                    :src="item.img"
                  />
                </a>
              </n-carousel-item>
            </n-carousel>
          </div>
          <div class="homePage-center_weather">
            <p class="homePage-center_weather--city kaiti">
              {{ weatherInfo?.province }}-{{ weatherInfo?.city }}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              {{ weatherInfo?.reporttime }}
            </p>
            <div class="homePage-center_weather--info">
              <svg class="icon" aria-hidden="true"><use :xlink:href="weatherInfo?.icon"></use></svg>
              <div class="kaiti">
                <p>{{ weatherInfo?.weather }}</p>
                <p>{{ weatherInfo?.temperature }} ℃</p>
              </div>
              <div class="kaiti">
                <p>风力：{{ weatherInfo?.windpower }}级</p>
                <p>风向：{{ weatherInfo?.winddirection }}风</p>
              </div>
            </div>
          </div>
          <div class="homePage-center_blog">
            <h1 class="kaiti homecard-title">
              <i></i>
              精选博客
            </h1>
              <ul class="homePage-center_blog_item">
                <li
                  v-for="item in bloglist"
                  :key="item.id"
                  class="homePage-center_blog_item_li"
                >
                  <div class="homePage-center_blog_item_li--text">
                    <h1 class="kaiti" @click="openDetaile(item)">
                      <svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.tagType"></use>
                      </svg>
                      {{ item.title }}
                    </h1>
                    <h2 @click="openDetaile(item)">{{ item.preface }}</h2>
                    <div>
                      <span>
                        <i class="iconfont icon-yonghu1"></i>
                        {{ item.author }}.{{ item.address }}
                      </span>
                      <span>
                        <svg class="icon" aria-hidden="true">
                          <use :xlink:href="item.system"></use>
                        </svg>
                        {{ item.system.split('-')[1] }}
                      </span>
                      <span>
                        <svg class="icon" aria-hidden="true">
                          <use :xlink:href="item.browser"></use>
                        </svg>
                        {{ item.browser.split('-')[1] }}
                      </span>
                      <span>
                        <i class="iconfont icon-shijian1"></i>
                        {{ item.createTime }}
                      </span>
                      <span>
                        <i class="iconfont icon-chakan2"></i>
                        {{ item.view }}
                      </span>
                      <span>
                        <i class="iconfont icon-tuijian2"></i>
                        {{ item.like }}
                      </span>
                      <span>
                        <i class="iconfont icon-xinxi11"></i>
                        {{ item.comment }}
                      </span>
                    </div>
                  </div>
                  <div v-if="item.img" class="homePage-center_blog_item_li--img">
                    <img :src="item.img">
                  </div>
                </li>
              </ul>
          </div>
        </div>
        <div>
          <NontCard/>
          <AbouteSite />
          <LinkCard />
          <MsgCard/>
        </div>
      </div>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import { getCarousel } from "../service/api/home"
import { getBlogSelect } from "../service/api/blog"
import weacherData from "../utils/weacher"
import { useNotification } from "naive-ui"
const notification = useNotification()
let loading = ref(false)
const bloglist = ref()
//轮播图列表
let carouselList = ref()
//天气数据
const weatherInfo = ref()

//获取网络IP
const getIP = async() => {
  await nextTick()
  useFetch('http://api.ipify.org?format=json').then(res => {
    console.log(res,'111111')
    const data = res.data
    if(res.status._value == 'success'){
      localStorage.setItem('IP',JSON.stringify(data._value.ip))
      getWeather()
    }
  })
}
//获取轮播图列表
const getCarouselList = async() => {
  await nextTick()
  const res:any = await getCarousel({})
  const data = res.data._value
  if(data.code == 200){
    carouselList.value = data.data
  }
}
//查询天气数据
const getWeather = async() => {
  await nextTick()
  const ip = JSON.parse(localStorage.getItem('IP'))
  let ctiyUrl = `https://restapi.amap.com/v3/ip?ip=${ip}&key=2b5eaa4f60d41eb084d8085b216b9e20`
  useFetch(ctiyUrl).then(res => {
    let city = res.data._rawValue.adcode
    let weatherUrl = `https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=2b5eaa4f60d41eb084d8085b216b9e20`
    useFetch(weatherUrl).then(data => {
      weatherInfo.value = data.data._rawValue.lives[0]
      weacherData.forEach(item => {
        if(item.name.includes(weatherInfo.value.weather)){
          weatherInfo.value.icon = item.font_class
        }
      })
    })
  })
}
//查看详情
const openDetaile = (item:any) => {
  navigateTo({
    path:'/detail',
    query:{
      id:item.id
    }
  })
}
//查询精选博客
const getSelectBlogList = async () => {
  loading.value = true
  await nextTick()
  const res:any = await getBlogSelect({})
  const data = res.data._value
  if(data.code == 200){
    bloglist.value = data.data
    loading.value = false
    if(data.total <= data.pageSize){
      notification['success']({
        content: '通知',
        meta: '已加载全部文章',
        duration: 2500,
        keepAliveOnHover: true
      })
    }
  }
}
onMounted(() => {
  getCarouselList()
  getSelectBlogList()
  getIP()
})
</script>
<script lang="ts">
  export default {
    layout:false
  }
</script>
<style scoped lang="scss">
.homePage{
  width: 80%;
  margin: 20px auto;
  display: flex;
  &-center{
    width: 100%;
    margin: 0 10px;
    &_carousle{
      width: 96%;
      // background-color: rgba($color: #fff, $alpha: .8);
      border-radius: 6px;
      height: 250px;
      padding: 20px 2%;
      margin-bottom: 20px;
    }
    &_blog{
      width: 92%;
      background-color: rgba($color: #fff, $alpha: .8);
      border-radius: 6px;
      padding: 20px 4%;
      margin-bottom: 20px;
      &_item{
        &_li{
          background-color: #eee;
          margin-bottom: 10px;
          padding: 20px;
          border-radius: 4px;
          display: flex;
          justify-content: space-between;
          width: 95%;
          transition: box-shadow 0.3s ease;  
          &--text{
            h1{
              font-size: 18px;
              font-weight: 600;
              color: #333;
              margin-bottom: 10px;
            }
            h2{
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              color: #666;
              line-height: 24px;
            }
            div{
              line-height: 30px;
            }
            span{
              font-size: 12px;
              margin-right: 20px;
              display: inline-flex;
              align-items: center;
              .icon{
                margin-right: 5px;
              }
              .iconfont{
                vertical-align: middle;
                font-size: 16px;
                margin-right: 5px;
              }
            }
          }
          &--img{
            img{
              width: 120px;
              height: 80px;
              border-radius: 4px;
              margin-left: 20px;
            }
          }
        }
        &_li:hover{
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 
        }
        }
    }
    &_weather{
      width: 92%;
      background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
      border-radius: 6px;
      padding: 20px 4%;
      margin-bottom: 20px;
      &--city{
        font-size: 16px;
        margin-bottom: 20px;
      }
      &--info{
        display: flex;
        justify-content: space-around;
        align-items: center;
        .icon{
          font-size: 60px;
        }
        p{
          line-height: 30px;
        }
      }
    }
  }
}
.homecard-title{
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  i{
    margin-right: 4px;
    display: inline-block;
    width: 4px;
    height: 17px;
    background-color: $yun-color;
    vertical-align: middle;
  }
}
</style>